<template>
	<view>
		<mine-head title="分类统计"></mine-head>
		<view class="content">
			<view class="box">
				<view class="title-box _df _ac">
					<image src="@/static/img/mine/hdIcon1.png" mode=""></image>
					冥想
				</view>
				<view class="list">
					<view class="item">
						<view class="title">
							累计冥想分钟数
						</view>
						<view class="num-box">
							0 <span class="ml20">分钟</span>
						</view>
					</view>
					<view class="item item2">
						<view class="title">
							累计冥想次数
						</view>
						<view class="num-box">
							0 <span class="ml20">次</span>
						</view>
					</view>
					<view class="item item3">
						<view class="title">
							坚持天数
						</view>
						<view class="num-box">
							0 <span class="ml20">天</span>
						</view>
					</view>
				</view>
			</view>
			<view class="box box2">
				<view class="title-box _df _ac">
					<image src="@/static/img/mine/hdIcon2.png" mode=""></image>
					正念
				</view>
				<view class="list">
					<view class="item">
						<view class="title title2">
							累计正念分钟数
						</view>
						<view class="num-box">
							0 <span class="ml20">分钟</span>
						</view>
					</view>
					<view class="item item2">
						<view class="title title2">
							累计正念次数
						</view>
						<view class="num-box">
							0 <span class="ml20">次</span>
						</view>
					</view>
					<view class="item item3">
						<view class="title title2">
							坚持天数
						</view>
						<view class="num-box">
							0 <span class="ml20">天</span>
						</view>
					</view>
				</view>
			</view>
			<view class="box box3">
				<view class="title-box _df _ac">
					<image src="@/static/img/mine/hdIcon3.png" mode=""></image>
					呼吸
				</view>
				<view class="list">
					<view class="item">
						<view class="title title3">
							累计呼吸分钟数
						</view>
						<view class="num-box">
							0 <span class="ml20">分钟</span>
						</view>
					</view>
					<view class="item item2">
						<view class="title title3">
							累计呼吸次数
						</view>
						<view class="num-box">
							0 <span class="ml20">次</span>
						</view>
					</view>
					<view class="item item3">
						<view class="title title3">
							坚持天数
						</view>
						<view class="num-box">
							0 <span class="ml20">天</span>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		methods:{
			
		},
	}
</script>

<style lang="scss" scoped>
.content{
	padding: 60rpx 50rpx;
	.box{
		height: 250rpx;
		background: #ebf2ff;
		border-radius: 24rpx;
		padding: 35rpx 30rpx 0;
		margin-bottom: 30rpx;
		.title-box{
			font-size: 28rpx;
			font-family: $uni-font-family-Bold;
			color: #171717;
			margin-bottom: 40rpx;
			image{
				width: 46rpx;
				height: 46rpx;
				margin-right: 20rpx;
			}
		}
		.list{
			display: flex;
			.item{
				width: 40%;
				.title{
					font-size: 26rpx;
					font-family: $uni-font-family-Bold;
					color: #4184FF;
					margin-bottom: 5rpx;
				}
				.title2{
					color: #f8aa2d;
				}
				.title3{
					color: #6BCF9F;
				}
				.num-box{
					font-size: 48rpx;
					font-family: $uni-font-family-Heavy;
					color: #000;
					span{
						font-size: 24rpx;
						color: #848484;
						margin-left: 10rpx;
					}
				}
			}
			.item2{
				width: 35%;
			}
			.item3{
				width: 25%;
			}
		}
	}
	.box2{
		background: #FCF4E8;
	}
	.box3{
		background: #EBFFF5;
	}
	
}
</style>
